import Image from 'next/legacy/image'
import Section from '../section'
import RightArrow from '../../svg/arrow-right'
import AppPreviewImage from '@/public/static/images/preview/rubick-preview-2.png'
import styles from './preview.module.css'

const Preview = () => (
  <Section>
    <div className={`${styles.split} ${styles.reverse}`}>
      <div className={styles.preview}>
        <Image
          src={AppPreviewImage}
          placeholder="blur"
          width={1248}
          height={770}
          alt="Kap in Light Mode"
          className={styles.previewImage}
          layout="responsive"
        />
      </div>
      <div className={styles.container}>
        <div className={`${styles.previewDescription} ${styles.text}`}>
          <h3>更自由的插件体系</h3>
          <p>基于 npm 的插件管理体系，安装插件更加迅速，卸载插件更加无痕。真正的用完即走！</p>
          <a target="_blank" href="https://rubickcenter.github.io/docs/dev/">
            <span>插件开发指南</span>
            <i className={styles.arrow}>
              <RightArrow />
            </i>
          </a>
        </div>
      </div>
    </div>
  </Section>
)

export default Preview
